<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>寇新峰的demo7</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        border: 0px;
    }

    /* 第一题 */
    #a1 {
        width: 694px;
        height: 50px;
        margin: 0 auto;
        font-size: 0px;
        /* border: 1px solid gold; */
    }

    a {
        width: 98px;
        height: 48px;
        text-align: center;
        color: pink;
        font: 16px/48px '微软雅黑';
        margin-left: -1px;
        border: 1px solid gold;
        display: inline-block;
        background-color: white;
        text-decoration: none;
    }

    a:hover {
        color: white;
        background-color: gold;
    }

    /* 第二题 */
    #a2 {
        width: 400px;
        height: 41px;
        margin: 0 auto;
        box-sizing: border-box;
        border-bottom: 1px #ff8200 solid;
    }

    .a2-1 {
        width: 80px;
        height: 41px;
        display: inline-block;
        font-size: 16px;
        line-height: 41px;
        text-align: center;
        color: white;
        background-color: #ff8200;
    }

    .a2-2 {
        float: right;
        margin: 10px 0px;
        font-size: 14px;
        color: #666;
    }

    /* 第三题 */
    #a3 {
        width: 452px;
        height: 212px;
        margin: 0 auto;
        border: 1px gray solid;
    }

    .a3-1 {
        float: left;
        margin: 10px 10px 0px 10px;
    }

    .a3-2 {
        margin: 10px 10px 10px 10px;
        line-height: 30px;
    }

    /* 第五题 */
    #a5 {
        width: 694px;
        height: 50px;
        margin: 0 auto;
    }

    #a5 ul li {
        width: 98px;
        height: 48px;
        float: left;
        text-align: center;
        line-height: 48px;
        margin-left: -1px;
        color: pink;
        list-style: none;
        background-color: #fff;
        border: 1px solid gold;
    }

    #a5 ul li:hover {
        background-color: gold;
        color: white;
    }

    /* 第六题 */
    #a6 {
        width: 402px;
        height: 82px;
        margin: 0 auto;
        border: 1px solid #ff8200;
    }

    .a6-1 {
        width: 60px;
        height: 60px;
        float: left;
        margin: 10px 0 10px 10px;
        background-color: #90ee90;
    }

    .a6-2 {
        width: 60px;
        height: 60px;
        float: right;
        margin: 10px 10px 10px 0;
        background-color: pink;
    }

    /* 第七题 */
    #a7 {
        width: 212px;
        margin: 0 auto;
        border: 1px solid #070707;
        /* overflow: hidden; */
    }

    #a7:after,
    #a7:before {
        content: "";
        display: table;
    }

    #a7:after {
        clear: both;
    }

    #a7 {
        zoom: 1;
    }

    .a7-1 {
        width: 50px;
        height: 50px;
        float: left;
        text-align: center;
        line-height: 50px;
        margin: 10px 10px 10px 10px;
        background-color: gold;
    }

    /* 第八题 */
    #a8 {
        width: 100px;
        height: 100px;
        border-radius: 15px 0px 15px 15px;
        position: relative;
        margin: 0 auto;
        background-color: gold;
    }
    .a8-1 {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        text-align: center;
        line-height: 28px;
        background-color: red;
        position: absolute;
        top: -12px;
        right: -12px;
    }
    /* 第九题 */

</style>

<body>
    <!-- 第一题 -->
    <div id="a1">
        <a href="">首页</a>
        <a href="">公司简介</a>
        <a href="">解决方案</a>
        <a href="">公司新闻</a>
        <a href="">行业动态</a>
        <a href="">招纳贤才</a>
        <a href="">联系我们</a>
    </div>
    <br>
    <br>
    <!-- 第二题 -->
    <div id="a2">
        <div class="a2-1">新闻列表</div>
        <div class="a2-2">更多></div>
    </div>
    <br>
    <br>
    <!-- 第三题 -->
    <div id="a3">
        <div class="a3-1">
            <img src="./bg.jpg" alt="1123">
        </div>
        <div class="a3-2">
            1. 浮动元素有左浮动(float:left)和右浮动两种
            2. 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
            3. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
            4. 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)

        </div>
    </div>
    <br>
    <br>
    <!-- 第五题 -->
    <div id="a5">
        <ul>
            <li>首页</li>
            <li>公司简介</li>
            <li>解决方案</li>
            <li>公司新闻</li>
            <li>行业动态</li>
            <li>招纳贤才</li>
            <li>联系我们</li>
        </ul>
    </div>
    <br>
    <br>
    <!-- 第六题 -->
    <div id="a6">
        <div class="a6-1"></div>
        <div class="a6-2"></div>
    </div>
    <br>
    <br>
    <!-- 第七题 -->
    <div id="a7">
        <div class="a7-1">1</div>
        <div class="a7-1">2</div>
        <div class="a7-1">3</div>
        <div class="a7-1">4</div>
        <div class="a7-1">5</div>
        <div class="a7-1">6</div>
        <div class="a7-1">7</div>
        <div class="a7-1">8</div>
    </div>
    <br>
    <br>
    <!-- 第八题 -->
    <div id="a8">
        <div class="a8-1">5</div>
    </div>
    <br>
    <br>
    

</body>

</html>